<template>
  <div>
    <div class="home-search">
      <el-input v-model="input" placeholder="Search" id="search-input" style="width: 92vw;height;margin: 2vh 0;">
          <i slot="suffix" class="el-input__icon el-icon-search" size="medium" @click="search('')"></i>
      </el-input>
    </div>
    <div class="search-tags">
      <div class="search-tag" v-for="i in tags" :key="i" @click="search(i)">{{i}}</div>
    </div>
    <!-- 搜索弹窗1 -->
    <mt-popup v-model="popupVisible" position="right" id="pop"> 
      <mt-header :title="input">
        <mt-button icon="back" slot="left" @click="close">返回</mt-button>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </mt-header>
      
      <div id="search-res">
        <el-table
          :data="searchData"
          style="width: 100vw">
          
          <el-table-column
            label="结束日期"
            width="130">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.endTime.split('T')[0] }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            label="活动名称"
            width="160">

            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.title }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.title }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="view(scope.$index, scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </mt-popup>
    
    <!-- 艹。这波屎山实锤了，为什么弹窗不做模块化啊 -->
    <!-- 详情弹窗 -->
    <mt-popup v-model="popupVisible2" position="right" id="pop"> 
      
      <mt-header title="活动详情">
        <mt-button icon="back" slot="left" @click="close">返回</mt-button>
      </mt-header>

      <div class="active-info">
        <div class="cover-img">
          <div class="active-publicer" style="background-size:cover;">
            <img class="publicer-img" :src="active.img" alt="">
            <div class="active-title">{{this.active.title}}(#{{this.active.aid}})</div>
          </div>
        </div>

        
        <el-descriptions  direction="vertical" :column="3" border>
          <el-descriptions-item label="活动简介" :span="3" contentStyle="height: 10vh;">{{this.active.introduce}}</el-descriptions-item>

          <el-descriptions-item label="发起者">{{this.active.uid}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{this.active.contact}}</el-descriptions-item>
          <el-descriptions-item label="人数限制">{{this.active.nowNum}}/{{this.active.maxNum}}</el-descriptions-item>
          <el-descriptions-item label="活动地点" :span="3">{{this.active.location}}</el-descriptions-item>
          
          <el-descriptions-item label="活动分类">{{this.active.tag}}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{this.active.beginTime}}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{this.active.endTime}}</el-descriptions-item>

          <el-descriptions-item label="选项" :span="3" contentStyle="text-align:center;">
            <el-button type="primary" @click="join(active)">加入活动</el-button>
            <el-button type="danger" @click="quit(active)">退出活动</el-button>            
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </mt-popup>
  </div>
  
</template>

<script>
import token from '@/apis/refresh_token'
import active from '@/apis/active_operations'

export default {
  name: "HomeSearch",
  data () {
    return {
      input: '',
      list:[],
      popupVisible: false,
      popupVisible2: false,
      searchData: [],
      active: {},
      tags: ['出游', '聚餐', '学习']
    }
  },
  mounted() {
  //  实际操作的时候先请求，请求到res之后再放到vuex里面
  //   this.$store.commit('allActives', this.list)
  //   console.log(this.$store.state)
  },
  methods: {
    open () {
      this.popupVisible = true
    },
    close () {
      this.popupVisible2 ? 
      this.popupVisible2 = false:
      this.popupVisible = false
    },
    // 首次搜索, 进一步的分页请求另外写
    search (tagData, $event) {
      if (!(tagData.trim('') || (this.input).trim(''))) {
        this.$message({
          message: '搜索内容不能为空',
          type: 'error'
        })
        return
      }
      if (tagData) {
        this.input = tagData
      }
      this.searchData = []
      this.open ()
        token.request().then(() => {
          this.$axios.get('/back/activity/find', {
            headers: {
              "token": localStorage.getItem('token')
            },
            params: {
              "keywords": this.input,
              "page": 1,
              "size": 100
            }
          }).then((res) => {
            let that = this
            res.data.data.records.forEach(one => {
              one.beginTime = one.beginTime.split('T')[0]
              one.endTime = one.endTime.split('T')[0]
              that.searchData.push(one)
            })
          }).catch((err) => {
            console.warn(err)
          })
        }
      )
    },

    view (index, data) {
      this.active = data
      this.popupVisible2 = true
    },

    quit(act) {
      console.log(act)
      token.request().then(() => {
        active.quitActive(act.aid, (data) => {
          if (data.code != 200) {
            this.popupVisible = false
            this.$message({
              message: '你还没有加入活动',
              type: 'error'
            })
          } else {
            this.popupVisible = false
            this.$message({
              message: '退出活动成功',
              type: 'success'
            })
            
          }
          this.close()
        })
      })
    },

    join (a) { 
      if (a.nowNum >= a.maxNum) {
        this.$message.error('活动人数已满!')
        return  
      }
      token.request().then(() => {
        active.joinActive(a.aid, (data) => {
          if (data.code != 200) {
            this.popupVisible = false
            this.$message({
              message: '已经加入过活动了，请勿重复加入',
              type: 'error'
            })
          } else {
            this.popupVisible = false
            this.$message({
              message: '加入活动成功',
              type: 'success'
            })
          }
          this.close()
        })
      })
    }
  }
}
</script>

<style scoped>
  #search-input{
    width: 85%;
    /* padding: 0.5rem; */
    margin: 1rem;
  }
  #pop {
    height: 100vh;
    width: 100vw;
    overflow: scroll !important;
  }
  .active-publicer{
    position: relative;
    width: 100%;
    height: 38vh;
    /* background: url("../../assets/imgs/pics/test1.png") no-repeat center center; */
    background-size: cover;
    background-color: #000;
    overflow: hidden;
    
  }
  .active-publicer img {
    width: 100%;
    height: 100%;
  }
  .active-title{
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-color: #fff3;
    backdrop-filter: blur(2px); */
    padding: 10px;
    /*line-height: 16rem;*/
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 2px 2px 5px #000;
  }
  .time.notEnd{
    color: #ff3700;
  }
  .search-tags{
    width: 85%;
    margin: 0 0 1rem 1rem;
    display: flex;
    justify-content: left;
  }
  .search-tag{
    margin: 0 1rem 0 0;
    border: 1px solid #e3e3e3;
    padding: 0.5rem;
  }
  
</style>